<template>
  <view class="coupon-my-wrap" >
    <view class="header">
      <!-- tab 切换 -->
      <view class="tab-box">
        <u-tabs
          :list="classCouponList"
          :current="current"
          :fontSize="28"
          :isScroll="false"
          bgColor="#ffffff"
          inactiveColor="#999999"
          @change="handleTabChange"
          :active-item-style="{ color: '#333' }"
          :bar-style="{ background: '#FEDD00', borderRadius: '100rpx' }"
        ></u-tabs>
      </view>

      <!-- 列表 -->
      <view class="list" >
        <view
        v-for="(item, index) in items"
        :key="index"
        class="coupon-item"
        >
          <view class="head-name" >
            <view class="head-title" >
              {{ item.coupon.name }}
            </view>
            <view class="head-money" >
              ¥{{ item.coupon.offer_amount }}
            </view>
          </view>
          <view class="coupon-code" >
            券码：<text style="color: red;" >{{ item.code }}</text>
          </view>
          <!-- 过期时间 -->
          <view class="count-line">
           {{ item.created_at }} - {{ item.expire_time }}
          </view>

          <div class="remark" >
            <div class="remark__business" @tap="handleToSelect(item)" >
              <span>仅限用于限定商家</span>
              <i :class="['iconfont icon-arrow-right arrow-bottom', item.remarkShow ? 'arrow-top' : '']" ></i>
            </div>
            <div
            v-if="item.status === 1"
            class="action-btn receive-btn" @click="handleToUse(item)" >
              去使用
            </div>
            <div
            v-if="item.status === 0 && validTime"
            class="history-btn"
            >
              已过期
            </div>
            <div
            v-if="item.status === 0 && !validTime"
            class="history-btn"
            >
              已使用
            </div>
          </div>
          <div class="remark-desc" v-if="item.remarkShow" >
            <div class="business-box" >
              <span>商家名称：</span>
              <span>{{ item.coupon.issue_merchant }}</span>
            </div>
            <rich-text :nodes="item.coupon.remark"></rich-text>
          </div>

        </view>
        <view class="full-green" v-if="!isEmpty">
          <load-more :status="loadingStatus"></load-more>
        </view>
        <view v-else>
          <u-empty description="暂无优惠券～"></u-empty>
        </view>
      </view>

    </view>
  </view>
</template>

<script>
  import loadMore from '@/components/load-more.vue';
  import uEmpty from '@/basic-components/u-empty/index.vue';
  import uTabs from '@/basic-components/u-tabs/index.vue';
  import { momentDate } from '@/tool';
  import moreLoadMixins from '@/common/load-more';

  import { COUPON_MY, COUPON_USE } from '@/api/coupon';
  export default {
    components: {
      loadMore,
      uEmpty,
      uTabs,
    },
    mixins: [moreLoadMixins],
    data() {
      return {
        // tab切换
        current: 0,
        classCouponList: [{
          name: '已领取'
        },{
          name: '历史券'
        },],

      };
    },
    async onShow() {

      // 列表信息
      this.resetInit();
    },
    async onPullDownRefresh() {
      // 初始化
      await this.resetInit();
      uni.stopPullDownRefresh();
    },
    methods: {
      handleTabChange(index) {
        if(this.current === index) {
          return
        }
        this.current = index;
        this.resetInit();
      },
      handleToSelect(item) {
        item.remarkShow = !item.remarkShow;
      },
      initData() {
        // 列表搜索
        const params = {};
        params.page = this.pages.currentPage;
        params.per_page = this.pages.perPage;

           const statusInt = {
             0: 1,
             1: 2
           }
           params.type = statusInt[this.current];
        return this.$http.get(COUPON_MY, params).then(res => {
          const { data, last_page, current_page, total } = res;

          if (data && data.length) {
            data.forEach(item => {
              const nowTime = new Date().getTime();
              item.remarkShow = false;
              item.created_at = momentDate(item.created_at, 'YYYY-MM-DD');
              if(item.expire_time) {
                if(nowTime > item.expire_time * 1000) {
                  item.validTime = true;
                }else {
                  item.validTime = false;
                }
                item.expire_time = momentDate(item.expire_time, 'YYYY-MM-DD');

              }

            });

            this.items = this.items.concat(data);
            this.pages.currentPage=current_page+1;
          }
          return {
            perPage: this.pages.perPage,
            currentPage: this.pages.currentPage,
            hasNext: !last_page === current_page,
            empty: current_page === 1 && total === 0,
          };
        });
      },
      /**
       * 去使用
       */
      handleToUse(item) {
        uni.showModal({
          title: '温馨提示',
          content: `是否确定使用${item.coupon.name}?`,
          success: res => {
            if (res.confirm) {

               this.confirmUse(item)
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          },
        });
      },
      confirmUse(item) {
        this.$http.put(`${COUPON_USE}/${item.id}`, {}, {
          showLoading: true
        })
        .then(() => {
          this.resetInit();
          uni.showToast({
            title: '使用成功',
            icon: 'success',
          });
        })

      }

    }

  }
</script>

<style lang="less" >
  .coupon-my-wrap{
    .list{
      padding-top: 20rpx;
    }
    .coupon-item{
      width: 700rpx;
      margin: auto;
      margin-bottom: 20rpx;
      padding: 10rpx 20rpx;
      border-radius: 10rpx;
      box-sizing: border-box;
      background-color: #FFFFFF;
      .head-name{
        display: flex;
        justify-content: space-between;
        padding: 10px 0;
        .head-title{
          flex: 1;
          font-size: 28rpx;
          font-weight: 500;
          color: #333333;
        }
        .head-money{
          flex-shrink: 0;
          margin-left: 20rpx;
          font-size: 28rpx;
          font-weight: 500;
          color: red;
        }
      }
      .count-line{
        font-size: 24rpx;
        margin-bottom: 16rpx;
        color: #999999;
      }
      .remark{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20rpx 0;
        padding-top: 30rpx;
        border-top: 1px solid #EEEEEE;
        .arrow-bottom{
          transform: rotate(90deg);
          transition: all 0.5s;
        }
        .arrow-top{
          transform: rotate(-90deg);
        }
        &__business{
          display: flex;
          align-items: center;
          color: #666666;
        }
        .receive-btn{
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100rpx;
          height: 44rpx;
          font-size: 24rpx;
          color: #FFFFFF;
          border-radius: 8rpx;
          background-color: red;
        }
      }
      .remark-desc{
        font-size: 24rpx;
        color: #999999;
      }
    }

    .history-btn{
      color: #999999;
    }
    .coupon-code{
      font-size: 28rpx;
      margin-bottom: 20rpx;
    }
  }
</style>
